<template>
  <div id="contain">
    <ul class="navUl">
      <li v-for="(item, index) in lists" :key="index">{{ item }}</li>
      <li v-if="token" @click="logout">退出登录</li>
      <li v-else @click="login">登录/注册</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: ["导航1", "导航1", "导航1", "导航1"],
      token: window.localStorage.getItem("token"),
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    async logout() {
      this.$confirm("确认退出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "/sys/user/logout",
            headers: { token: this.token },
          }).then((res) => {
            if (res.data.msg === "success") {
              window.localStorage.removeItem("token");
              this.token = window.localStorage.getItem("token");
              this.$message({
                type: "success",
                message: "退出成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style  scoped>
.navUl {
  height: 40px;
  display: flex;
  justify-content: space-around;
  justify-content: center;
  background-color: #6ac5b9;
  line-height: 40px;
}
li {
  display: inline-block;
  width: 100px;
}
</style>>


